<template>
  <div>
    <div style="margin-bottom: 10px; font-size: 14px; font-weight: 250; margin-left: 10px">
      <el-icon><ScaleToOriginal /></el-icon>
      课表查询
    </div>

    <div class="timeTable">
      <table>
        <thead>
        <tr>
          <th>时间</th>
          <th v-for="day in days" :key="day">{{ day }}</th>
        </tr>
        </thead>
        <tbody>
          <tr v-for="(timeSlot, timeIndex) in timeSlots" :key="timeIndex">
            <td>
              <div>{{ timeSlot.label }}</div>
              <div class="time-range">{{ timeSlot.time }}</div>
            </td>
            <td v-for="dayIndex in 7" :key="dayIndex">
              <div v-if="getCourse(dayIndex, timeIndex)" :class="{ 'has-course': getCourse(dayIndex, timeIndex) }">
                <div>
                  <div class="course-name">{{ getCourse(dayIndex, timeIndex).courseName }}</div>
                  <div class="teacher-name">{{ getCourse(dayIndex, timeIndex).teacherName }}</div>
                  <div class="course-location">{{ getCourse(dayIndex, timeIndex).location }}</div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from 'vue'
import request from "@/utils/request.js";
import {parseTimeString} from "@/utils/timeFormatter.js";

const student = JSON.parse(localStorage.getItem("student"))

const data = reactive({
  courses: []
})

// 星期几
const days = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日'])

// 时间段
const timeSlots = ref([
  { label: '第1节', time: '08:20-09:05' },
  { label: '第2节', time: '09:15-10:00' },
  { label: '第3节', time: '10:20-11:05' },
  { label: '第4节', time: '11:15-12:00' },
  { label: '第5节', time: '14:00-14:45' },
  { label: '第6节', time: '14:55-15:40' },
  { label: '第7节', time: '15:50-16:35' },
  { label: '第8节', time: '16:45-17:30' }
])


const load = () => {
  request.get("student/selectAllStudentCourse/" + student.id).then(res => {
    data.courses = res.data
  })
}

load()

// 获取指定星期和节次的课程
const getCourse = (day, timeIndex) => {
  // timeIndex从0开始，但课程时间中的节次从1开始，所以需要+1
  const currentTimeSlot = timeIndex + 1

  for (const course of data.courses) {
    const timeInfo = parseTimeString(course.time)
    if (!timeInfo) continue

    // 检查星期和节次是否匹配
    if (parseInt(timeInfo.weekday) === day &&
        currentTimeSlot >= parseInt(timeInfo.section) &&
        currentTimeSlot < parseInt(timeInfo.section) + parseInt(timeInfo.length)) {
        return course;
    }
  }
  return null
}
</script>

<style scoped>
.timeTable {
  background-color: white;
  border-radius: 20px;
  padding: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

th, td {
  border: 1px solid #e0e0e0;
  padding: 8px;
  height: 60px;
}

th {
  background-color: #67A1FF;
  font-weight: bold;
}

.time-range {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

.has-course {
  background-color: #e8f4ff;
  vertical-align: top;
}

.course-name {
  font-weight: bold;
  margin-bottom: 2px;
}

.teacher-name {
  padding: 4px;
  font-size: 12px;
}

.course-location {
  color: #666;
  font-size: 11px;
}
</style>

